CSS Full Course Day 10 [Hindi] 💻 | Grid Basics for Responsive Design 🚀 | Mohit Decodes

🧩 CSS Tutorial – Day 10: Grid Basics for Responsive Design

Welcome to Day 10 of the CSS Full Course [Hindi] by Mohit Decodes! Today we’ll learn the fundamentals of CSS Grid — a powerful layout system for building responsive web designs.

🔹 What is CSS Grid?

CSS Grid allows you to create complex two-dimensional layouts using rows and columns, making responsive designs easier and more intuitive.

🔹 Key CSS Grid Concepts

  1. Grid Container: The parent element with display: grid
  2. Grid Items: The direct children inside the grid container

🔹 Basic Grid Properties

Property (on container)Description
display: grid;Enables grid layout
grid-template-columnsDefines number and width of columns
grid-template-rowsDefines number and height of rows
grid-gap or gapSets spacing between grid items
justify-itemsAlign items horizontally inside cells
align-itemsAlign items vertically inside cells


⚙️ Example CSS:

css
CopyEdit
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
background-color: #f9f9f9;
padding: 20px;
}

.item {
background-color: #8bc34a;
padding: 30px;
color: white;
font-size: 20px;
text-align: center;
}

💡 Why Use CSS Grid?

  1. Perfect for creating two-dimensional layouts (both rows & columns)
  2. Simplifies complex page layouts without floats or positioning
  3. Easily builds responsive designs by adjusting grid-template-columns